import React,{Fragment} from "react";
import { Input,Button,List } from "antd";

const TodolistUI = (props) => {
  return (
    <Fragment>
        <Input 
        value ={props.inputValue}
        placeholder="todo info" 
        style={{width:300,marginTop:20,marginBottom:20,marginLeft:20,marginRight:20}}
        onChange={props.handleInputChange}
        />
        <Button 
            type="primary"
            onClick={props.handleBtnClick}
        >
            提交
        </Button>
        <List
            style={{width:300,marginTop:20,marginLeft:20}}
            bordered
            dataSource={props.list}
            renderItem={
                (item,index) => (<List.Item onClick={()=> {props.handleDelClick(index)}}>{item}</List.Item>)
            }                    
        />
    </Fragment>
  ) 
}

export default TodolistUI